<script setup>
defineProps({
	msg: String
})

const count = ref(0)

// console.log(
//   '%c [  ]-10',
//   'font-size:13px; background:pink; color:#bf2c9f;',
//   concat([1, 2], [3])
// );

// console.log(
//   '%c [  ]-14',
//   'font-size:13px; background:pink; color:#bf2c9f;',
//   cp()
// );

// console.log(
//   '%c [  ]-20',
//   'font-size:13px; background:pink; color:#bf2c9f;',
//   axios
// );
f1()
// 获取所有的svg
import ids from 'virtual:svg-icons-names'

// console.log(
//   '%c [ ids ]-28',
//   'font-size:13px; background:pink; color:#bf2c9f;',
//   ids
// );
</script>

<template>
	<h1 class="color-red">{{ msg }}</h1>

	<div class="card">
		<button type="button" @click="count++">count is {{ count }}</button>
		<p>
			Edit
			<code>components/HelloWorld.vue</code> to test HMR
		</p>
	</div>

	<p>
		Check out
		<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
		starter
	</p>
	<p>
		Install
		<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
		in your IDE for a better DX
	</p>
	<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
	<base-svg-icon name="comment-address" class="text-20px" />
	<!-- <base-svg-icon name="common-radio-highlight"  color="#8B81C3"/> -->
	<base-svg-icon name="icon-back" color="#8B81C3" />
	<el-button type="danger">危险</el-button>
</template>

<style scoped>
.read-the-docs {
	color: #888;

	/* font-size: 12px; */
	font-size: 12px; /*px*/
	/* font-size: 20px;  */
}
</style>
